<template>
  <div class="table">
    <el-table
      ref="table"
      :data="transportTaskList"
      height="380"
    >
      <el-table-column
        show-overflow-tooltip
        prop="id"
        label="任务编号"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="startAgency"
        label="起始地"
        align="center"
      ></el-table-column>
      <el-table-column
        :width="120"
        prop="endAgency"
        label="目的地"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="licensePlate"
        label="车辆"
        align="center"
      ></el-table-column>
      <el-table-column
        prop="status"
        label="任务状态"
        align="center"
      ><template v-slot="{ row }">
        {{ transportTaskState[row.status] }}
      </template></el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getWorkSpaceData } from '@/api/dashboard'
import { transportTaskState } from '../enum/enum'
export default {
  name: 'TransportTable',
  data() {
    return {
      timeId: null,
      transportTaskState,
      transportTaskList: []
    }
  },
  destroyed() {
    clearInterval(this.timeId)
  },
  async created() {
    const { data } = await getWorkSpaceData()
    const transportTaskList = data.transportTaskList
    transportTaskList.push(...transportTaskList)
    this.transportTaskList = transportTaskList

    const tableBody = this.$refs.table.bodyWrapper
    this.timeId = setInterval(() => {
      console.log(1)
      // 元素自增距离顶部2像素
      tableBody.scrollTop += 1
      // 判断元素是否滚动到底部(可视高度+距离顶部=整个高度)
      if (
        tableBody.clientHeight + tableBody.scrollTop >=
        tableBody.scrollHeight
      ) {
        // 重置table距离顶部距离
        tableBody.scrollTop = 0
      }
    }, 30)
  }
}
</script>

<style lang="scss" scoped>
.table {
  ::v-deep .el-table {
    .el-table__body-wrapper::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    .el-table__body-wrapper {
      scrollbar-width: none; /* firefox */
      -ms-overflow-style: none; /* IE 10+ */
    }
  }
}
</style>
